import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:rabbit_mobile/view/Home/models/home_model.dart';
import 'package:rabbit_mobile/widget/custom_cache_image_widget/index.dart';
import 'package:shimmer/shimmer.dart';

class ImageBannersWidget extends StatelessWidget {
  final AsyncValue imageBannerData;
  final double? height;
  final CustomPaginationBannerType? type;

  const ImageBannersWidget(
      {super.key, required this.imageBannerData, this.height, this.type});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      width: double.infinity,
      height: height,
      margin: const EdgeInsets.only(top: 20),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.0)),
      clipBehavior: Clip.antiAlias,
      child: imageBannerData.when(
        data: (data) {
          return data.imageBanners.isNotEmpty
              ? Swiper(
                  itemCount: data.imageBanners.length,
                  itemBuilder: (BuildContext context, int index) {
                    ImageBannersModel imageBannersModel =
                        data.imageBanners[index];
                    return CustomCacheImageWidget(
                      imageUrl: imageBannersModel.imgUrl ?? '',
                    );
                  },
                  autoplay: true,
                  scrollDirection: Axis.horizontal,
                  pagination: SwiperPagination(
                      builder: CustomPaginationBanner(type: type),
                      alignment: Alignment.bottomCenter),
                )
              : Container(
                  decoration: const BoxDecoration(color: Colors.tealAccent),
                );
        },
        error: (error, StackTrace) => const Center(
          child: Center(
            child: Column(
              children: [
                Icon(
                  Icons.dangerous,
                  color: Colors.red,
                  size: 30,
                ),
                Text(
                  "數據錯誤，請稍後再試",
                  style: TextStyle(fontSize: 16.0),
                )
              ],
            ),
          ),
        ),
        loading: () => Center(
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.transparent,
            ),
            child: Shimmer.fromColors(
              baseColor: Colors.grey.shade300,
              highlightColor: Colors.grey.shade400,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Container(
                  height: 220,
                  width: double.infinity,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

/// 枚舉：定義指示器leixing
enum CustomPaginationBannerType { dot, rect }

class CustomPaginationBanner extends SwiperPlugin {
  CustomPaginationBanner({this.type});

  /// 指示器的類型
  final CustomPaginationBannerType? type;

  @override
  Widget build(BuildContext context, SwiperPluginConfig config) {
    // config: 當前指示器元素個數和當前展示的指示器索引
    // 獲取當前指示器個數
    int itemCount = config.itemCount;
    // 獲取當前指示器的索引
    int activaeIndex = config.activeIndex;
    // 存放指示器
    List<Widget> items = [];
    // 循環創建指示器
    for (var i = 0; i < itemCount; i++) {
      items.add(
        type == CustomPaginationBannerType.dot
            ? ClipOval(
                child: Container(
                  margin: EdgeInsets.only(left: i != 0 ? 6 : 0),
                  width: 8,
                  height: 8,
                  decoration: BoxDecoration(
                    color:
                        i == activaeIndex ? Colors.teal : Colors.grey.shade300,
                    borderRadius: BorderRadius.circular(4.0),
                  ),
                ),
              )
            : Container(
                margin: EdgeInsets.only(left: i != 0 ? 6 : 0),
                width: 13.0,
                height: 4,
                decoration: BoxDecoration(
                  color: i == activaeIndex ? Colors.teal : Colors.grey.shade300,
                  borderRadius: BorderRadius.circular(4.0),
                ),
              ),
      );
    }
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: items,
    );
  }
}
